﻿@page "/docs/extensions/animate"

<Seo Canonical="/docs/extensions/animate" Title="Blazorise Animate component" Description="Learn to use and work with the Blazorise Animate component that provides a wrapper that will animate your content." />

<DocsPageTitle Path="Extensions/Animate">
    Blazorise Animate component
</DocsPageTitle>

<DocsPageLead>
    Animate your content by wrapping it with the <Code>Animate</Code> component.
</DocsPageLead>

<DocsPageParagraph>
    The Animate component provides a wrapper that will animate your content. It is based on the <Blazorise.Link Target="Target.Blank" To="https://michalsnik.github.io/aos/">AOS javascript library</Blazorise.Link>.
</DocsPageParagraph>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        <Paragraph>Blazorise acts as a wrapper for the animation functionality provided by the <Link To="https://michalsnik.github.io/aos/">aos library</Link>. If you're having any issues please make sure to also take a look at the aos library repository.</Paragraph>

        <Paragraph>There might be certain content, that due to how they are structured/styled might not be possible to animate.</Paragraph>
        <Paragraph>It is not possible to animate:</Paragraph>
        <UnorderedList>
            <UnorderedListItem>Modal</UnorderedListItem>
        </UnorderedList>
    </AlertDescription>
</Alert>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        Take note, that certain elements in the page may affect how the aos library finds the "offset" element necessary to trigger the animation. It is known that Sidebars for instance can affect this behaviour.
        To make sure your content is successfully animated you may configure the <Code>Anchor</Code> parameter giving the <Code>Animate</Code> component the necessary information to work.

        For example, the animate example given below, is configured as explained.
    </AlertDescription>

</Alert>
<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="AnimateNugetInstallExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="AnimateImportsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static Files">
        Add <Code>animate.js</Code> to your <Code>index.html</Code> or <Code>_Host.cshtml</Code> file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="AnimateResourcesExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <AnimateExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="AnimateExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Animate)]" />